<template>
  <div class="container">
    <!-- 新增：故障分析输入框 -->
    <div class="analysis-box mb-4 flex items-center">
      <n-input v-model:value="faultName" type="text" placeholder="请输入故障名称" clearable class="w-1/2" />
      <n-button type="primary" @click="analyzeFault" class="ml-2">分析故障</n-button>
    </div>
    
    <!-- 修改：搜索框减少一半宽度，并添加刷新按钮 -->
    <div class="search-box mb-4 flex items-center">
      <n-input v-model:value="searchValue" type="text" placeholder="搜索..." clearable class="w-1/2" />
      <n-button type="primary" @click="handleSearch" class="ml-2">搜索</n-button>
      <n-button type="primary" @click="fetchFiles" class="ml-2">刷新</n-button>
    </div>
    
    <!-- 大的容器框 -->
    <n-card title="故障解决报告" class="main-container">
      <!-- 搜索结果提示 -->
      <div v-if="searchValue.trim() !== ''" class="search-result-info mb-2">
        搜索结果: {{ filteredItems.length }} 条记录
      </div>
      <n-space vertical>
        <!-- 一条一条的小框 -->
        <n-card 
          v-for="item in filteredItems" 
          :key="item.id" 
          class="item-box"
          hoverable
        >
          <div class="flex justify-between items-center">
            <span>{{ item.title }}</span>
            <n-button type="primary" size="small" @click="handleViewDetails(item)">查看</n-button>
          </div>
        </n-card>
      </n-space>
    </n-card>
    
    <!-- 新增：查看详细信息的drawer -->
    <n-drawer v-model:show="showDetailDrawer" :width="'80%'" placement="right">
      <n-drawer-content closable>
        <template #header>
          <h3>{{ selectedItem.title }}</h3>
        </template>
        <n-tabs type="segment">
          <n-tab-pane name="content" tab="内容">
            <div v-if="selectedItem.type === 'html'">
              <p>{{ selectedItem.description }}</p>
              <iframe 
                :src="selectedItem.url" 
                style="width: 100%; height: 600px; border: 1px solid #ccc;"
                title="HTML Preview"
              ></iframe>
            </div>
            <div v-else-if="selectedItem.type === 'markdown'" class="markdown-content">
              <p>{{ selectedItem.description }}</p>
              <Markdown :source="processedMarkdownContent" />
            </div>
            <div v-else-if="selectedItem.type === 'text'">
              <p>{{ selectedItem.description }}</p>
              <pre style="white-space: pre-wrap; word-wrap: break-word; background-color: #f5f5f5; padding: 10px; border-radius: 4px;">{{ selectedItem.content }}</pre>
            </div>
            <div v-else-if="selectedItem.type === 'error'">
              <p>{{ selectedItem.description }}</p>
              <p style="color: red;">{{ selectedItem.content }}</p>
            </div>
            <div v-else>
              <p>不支持的文件类型</p>
            </div>
          </n-tab-pane>
          <n-tab-pane name="raw" tab="原始内容">
            <p>原始文件内容：</p>
            <pre style="white-space: pre-wrap; word-wrap: break-word; background-color: #f5f5f5; padding: 10px; border-radius: 4px; max-height: 600px; overflow-y: auto;">{{ selectedItem.content }}</pre>
          </n-tab-pane>
          <n-tab-pane name="download" tab="下载">
            <n-button type="primary" tag="a" :href="selectedItem.url" target="_blank" download>
              下载文件
            </n-button>
            <p style="margin-top: 10px;">点击按钮下载原始文件以保留完整格式</p>
          </n-tab-pane>
        </n-tabs>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, watch, computed } from 'vue'
import { NInput, NCard, NSpace, NButton, NDrawer, NDrawerContent, NTabs, NTabPane } from 'naive-ui'
import Markdown from 'vue3-markdown-it';
import 'highlight.js/styles/github.css';
import config from '@/config.js';

const { t } = useI18n()

// 新增：故障名称输入框的值
const faultName = ref('')

// 搜索框的值
const searchValue = ref('')

// 文件列表数据
const items = ref([])

// 过滤后显示的文件列表数据
const filteredItems = ref([])

// 控制drawer显示的变量
const showDetailDrawer = ref(false)

// 当前选中的项目
const selectedItem = ref({ id: 0, title: '', description: '', content: '', url: '' })

// 新增：分析故障的函数
const analyzeFault = async () => {
  if (!faultName.value) {
    console.error('请输入故障名称');
    return;
  }
  
  try {
    const response = await fetch(`${config.root_cause_analysis.api_url}/rootheal/analyze-fault`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ fault_name: faultName.value }),
    });
    
    const result = await response.json();
    
    if (result.error) {
      console.error('分析故障失败:', result.error);
      return;
    }
    
    // 分析成功后，重新获取文件列表
    fetchFiles();
    
    console.log('分析完成，结果已保存:', result.file_path);
  } catch (error) {
    console.error('分析故障失败:', error);
  }
}

// 获取文件列表
const fetchFiles = async () => {
  try {
    const response = await fetch(`${config.root_cause_analysis.api_url}/rootheal-files`);
    const files = await response.json();
    
    // 检查是否有错误
    if (files.error) {
      console.error('获取文件列表失败:', files.error);
      return;
    }
    
    // 转换数据格式以匹配现有结构，并进行逆序排列（最新的在前面）
    items.value = files
      .map((file, index) => ({
        id: index + 1,
        title: file.name,
        description: `文件路径: ${file.url}`,
        url: file.url
      }))
      .reverse(); // 逆序排列，使最新生成的内容显示在前面
    
    // 同时更新过滤后的列表
    filteredItems.value = [...items.value];
  } catch (error) {
    console.error('获取文件列表失败:', error);
  }
}

// 处理搜索
const handleSearch = () => {
  console.log('搜索:', searchValue.value)
  if (searchValue.value.trim() === '') {
    // 如果搜索框为空，显示所有项目
    filteredItems.value = [...items.value];
  } else {
    // 过滤包含搜索关键字的项目
    filteredItems.value = items.value.filter(item => 
      item.title.toLowerCase().includes(searchValue.value.toLowerCase())
    );
  }
}

// 获取文件扩展名
const getFileExtension = (filename) => {
  return filename.split('.').pop().toLowerCase();
}

// 处理查看按钮点击事件
const handleViewDetails = async (item) => {
  const fileExtension = getFileExtension(item.title);
  
  // 对于HTML文件，直接提供URL进行渲染
  if (fileExtension === 'html') {
    selectedItem.value = {
      id: item.id,
      title: item.title,
      description: 'HTML文件预览：',
      content: '',
      url: item.url,
      type: 'html'
    };
    showDetailDrawer.value = true;
    return;
  }
  
  try {
    // 从后端获取文件内容
    const response = await fetch(`${config.root_cause_analysis.api_url}/rootheal-files/${item.title}`);
    const fileData = await response.json();
    
    // 检查是否有错误
    if (fileData.error) {
      console.error('获取文件内容失败:', fileData.error);
      selectedItem.value = {
        id: item.id,
        title: item.title,
        description: '无法加载文件内容',
        content: fileData.error,
        url: item.url,
        type: 'error'
      };
      showDetailDrawer.value = true;
      return;
    }
    
    // 根据文件类型设置显示类型
    let type = 'text';
    if (fileExtension === 'md' || fileExtension === 'markdown') {
      type = 'markdown';
    }
    
    selectedItem.value = {
      id: item.id,
      title: fileData.name,
      description: '文件内容如下：',
      content: fileData.content,
      url: item.url,
      type: type
    };
    showDetailDrawer.value = true;
  } catch (error) {
    console.error('获取文件内容失败:', error);
    selectedItem.value = {
      id: item.id,
      title: item.title,
      description: '无法加载文件内容',
      content: '',
      url: item.url,
      type: 'error'
    };
    showDetailDrawer.value = true;
  }
}

// 计算属性：处理Markdown中的图片路径
const processedMarkdownContent = computed(() => {
  if (selectedItem.value.type !== 'markdown') return '';
  
  // 处理相对路径的图片，将其转换为完整的URL
  const baseUrl = window.location.origin;
  return selectedItem.value.content.replace(
    /\(([^)]*\.(png|jpg|jpeg|gif|svg))\)/gi,
    `(${config.root_cause_analysis.data_url}/$1)`
  );
});

// 监听搜索框内容变化，自动触发搜索
watch(searchValue, () => {
  handleSearch();
});

// 组件挂载时获取文件列表
onMounted(() => {
  fetchFiles();
});
</script>

<style scoped>
/* 自定义按钮样式 */
:deep(.n-button--primary-type) {
  background-color: #5CADFF !important;
  border-color: #5CADFF !important;
}
</style>